/**
 * Created by xmgong on 2018/1/4.
 */
import React from 'react';
import {connect} from 'react-redux';
import {
    Text,
    FlatList,
    View,
    StyleSheet,
    TouchableOpacity,
    Image,
    Button,
    TextInput,
    TouchableHighlight,
    NativeModules,
    InteractionManager,
    Alert
} from 'react-native';
import CLNavigatorHeader from '../../component/CLNavigatorHeader';
import {getBankListAction, chooseBank} from './actions';
import {naviPush, naviBack} from '../../navigatorApp/actions';

class ChooseBank extends React.Component {
    static navigationOptions = ({navigation, screenProps}) => ({
        header: <CLNavigatorHeader navigation={navigation} title="选择支行"/>,
    });

    constructor(props) {
        super(props);
        this.state = {
            bankList: [],
            isLoading: false,
            footText: "加载更多",
            hasMore: false,
            refreshing: false
        }
    }

    _separator = () => {
        return (<View style={{height: 1, marginLeft: 10, marginRight: 10, backgroundColor: 'rgba(155,155,155,0.1)'}}/>)
    };

    chooseBank = (bankname) => {
        this.props.chooseBank(bankname, () => {

        });
        this.props.naviBack();
    };

    _renderItem = ({item}) => {
        return (
            <TouchableOpacity onPress={() => this.chooseBank(item.branchName)}>
                <View style={{
                    paddingLeft: 10,
                    paddingTop: 5,
                    paddingBottom: 5,
                    paddingRight: 10,
                    flexDirection: 'column'
                }}>
                    <Text>{item.branchName}</Text>
                    <View style={{flexDirection: 'row', alignItems: 'center'}}>
                        <Image style={{width: 9, height: 12, marginRight: 5}}
                               source={require('../../image/location.png')}/>
                        <Text>{item.address}</Text>
                    </View>
                </View>
            </TouchableOpacity>)
    };

    _renderFooter = () => {
        return (
            <View style={{
                padding: 10,
                borderTopColor: "#eee",
                borderTopWidth: 1,
                flex: 1,
                flexDirection: 'row',
                justifyContent: 'center'
            }}>
                <Text style={{color: "gray"}}>{this.state.footText}</Text>
            </View>
        )
    };

    render() {
        return (<FlatList
            style={{backgroundColor: 'white'}}
            data={this.state.bankList}
            renderItem={this._renderItem}
            ItemSeparatorComponent={this._separator}
        />)
    }


    componentDidMount() {
        this.getDataAction();
    }


    getDataAction = () => {
        let pdata = this.props.navigation.state.params;
        let area = pdata.area;
        let params = {
            token: this.props.token,
            bankName: pdata.bankName,
            province: area.shen,
            city: area.shi,
            keyword: area.xian
        };
        let self = this;
        getBankListAction(params, (res) => {
            self.setState({
                bankList: res.data
            })
        });
    }
}


const mapStateToProps = state => ({
    userToken: state.mainmodel.userToken,
    token: state.mainmodel.token,
});

const mapDispatchToProps = dispatch => ({
    chooseBank: (name, callback) => {
        dispatch(chooseBank(name, callback))
    },
    naviBack: () => {
        dispatch(naviBack())
    },
});


export default connect(
    mapStateToProps,
    mapDispatchToProps)
(ChooseBank);

